<template>
  <div class="heaer_inner">
    <el-header>
      <i :class ='[isOpen ? close : open, icon, iconfont]' @click='operating'></i>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">管理员</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-switch-button" command="logOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!--<span>管理员</span>-->
    </el-header>
  </div>
</template>

<script>
import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui'

export default {
  components: {
    [Dropdown.name]: Dropdown,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem
  },
  data () {
    return {
      open: 'icon-daohangzhankai-',
      close: 'icon-daohangshouqi-',
      icon: 'icon',
      iconfont: 'iconfont',
      isOpen: false
    }
  },
  methods: {
    operating () {
      this.isOpen = !this.isOpen
      this.$emit('isCollapse', this.isOpen)
    },
    handleCommand(command) {
      if (command === 'logOut') {
        this.$notify({
          message: '已退出登录',
          type: 'success'
        });
        this.$router.push('/');
      }
    }
  }
};
</script>

<style scoped lang = 'less'>
.heaer_inner {
  background: url(../assets/header.png) repeat center;
  background-size: contain;
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    .el-dropdown-link {
      color: #FFF;
    }
  }
}
</style>
